<template>
    <m-page>
        <result :imgUrl="imgUrl">
            <template v-slot:result-content>
                <div>信用卡还款成功</div>
                <div>
                    <span>还款金额：</span>
                    <span>1350.00元</span>
                </div>
            </template>
            <template v-slot:result-footer>
                <div class="btn ynet-btn_mini__2">
                    <ynet-button class="first-btn" @click-native="continueRepay">继续还款</ynet-button>
                </div>
                <div class="btn ynet-btn_mini__2">
                    <ynet-button @click-native="finishRepay">完成</ynet-button>
                </div>
                <div class="link">
                    <!-- 跳转自动还款设置 -->
                    <a>设置自动还款</a>
                    <span class="icon">|</span>
                    <!-- 跳转快捷支付签约 -->
                    <a>快捷支付签约</a>
                </div>
                <div class="banner">
                    <!-- 活动banner占位符 -->
                    这里是banner
                </div>
            </template>
        </result>
    </m-page>
</template>
<script>
import result from '../../components/result';

export default {
    components: {
        // 结果页面组件
        result
    },
    data() {
        return {
            imgUrl: require('@assets/ynet_InviteFriends/code_logo.png')
        };
    },
    computed: {},
    watch: {},
    methods: {
        /**
         * FRAME
         * 继续还款点击事件
         * TODO -- 跳转信用卡还款默认页
         */
        continueRepay() {
            console.log('继续还款点击事件');
        },
        /**
         * FRAME
         * 完成还款点击事件
         * TODO -- 跳转信用卡首页
         */
        finishRepay() {
            console.log('完成还款点击事件');
        }
    },
    mounted() {},
    created() {}
};
</script>
<style lang="sass">
.repayment_result {
    background: white;
}
.footer {
    .btn {
        .first-btn {
            button {
                color: #333;
                background: #ccc;
            }
        }
    }
    .link {
        color: #00a5e0;
        .icon {
            vertical-align: text-bottom;
            margin: 0 5px;
        }
    }
    .banner {
        margin-top: 30px;
    }
}
</style>
